<template>
  <div class="design-table-bar-container" @mousedown.stop>
    <a-tooltip placement="bottom">
      <template slot="title">
        <span>辅助线</span>
      </template>
      <span @click="() => $emit('showGridChange', !showGrid)" :class="['iconfont','grid-icon', {'grid-icon-grid': showGrid}]">&#xe783;</span>
    </a-tooltip>
    <FontColor :section="selection" :disabled="!selection || disabledActions.has('color')" v-model="style.color"/>
    <FontBolder :selection="selection" :disabled="!selection || disabledActions.has('fontWeight')" v-model="style.fontWeight"/>
    <FontItalic :selection="selection" :disabled="!selection  || disabledActions.has('fontStyle')" v-model="style.fontStyle"/>
    <BackgroundColor :selection="selection" :disabled="!selection  || disabledActions.has('background')" v-model="style.background"/>
    <FontSelector :section="selection" :disabled="!selection  || disabledActions.has('font')" v-model="style.font"/>
    <FontSize :section="selection" :disabled="!selection  || disabledActions.has('fontSize')" v-model="style.fontSize"/>
    <AlignItems :selection="selection" :disabled="!selection  || disabledActions.has('alignItems')" v-model="style.alignItems"/>
    <VerticalAlign :selection="selection" :disabled="!selection  || disabledActions.has('verticalAlign')" v-model="style.verticalAlign"/>
    <CellBorder :selection="selection" :disabled="!selection  || disabledActions.has('selection')"/>
    <cell-height :selection="selection" :disabled="!selection  || disabledActions.has('height')" v-model="style.height"/>
    <CellWidth :selection="selection" :disabled="!selection  || disabledActions.has('width')" v-model="style.width"/>
  </div>
</template>
<script>
import FontSelector from '@/components/hhd/design/DesignTable/cell/FontSelector.vue';
import FontColor from '@/components/hhd/design/DesignTable/cell/FontColor.vue';
import FontSize from '@/components/hhd/design/DesignTable/cell/FontSize.vue';
import FontBolder from '@/components/hhd/design/DesignTable/cell/FontBolder.vue';
import VerticalAlign from '@/components/hhd/design/DesignTable/cell/VerticalAlign.vue';
import AlignItems from '@/components/hhd/design/DesignTable/cell/AlignItems.vue';
import BackgroundColor from '@/components/hhd/design/DesignTable/cell/BackgroundColor.vue';
import FontItalic from '@/components/hhd/design/DesignTable/cell/FontItalic.vue';
import CellBorder from '@/components/hhd/design/DesignTable/cell/CellBorder.vue';
import {createProps} from '@/utils';
import CellHeight from "@/components/hhd/design/DesignTable/cell/CellHeight";
import CellWidth from '@/components/hhd/design/DesignTable/cell/CellWidth.vue';

export default {
  name: 'DesignBarContainer',
  components: {
    CellWidth,
    CellHeight,
    CellBorder,
    FontItalic, BackgroundColor, AlignItems, VerticalAlign, FontBolder, FontSize, FontColor, FontSelector},
  props: {
    selection: {
      type: Object,
      default: undefined
    },
    showGrid: createProps(Boolean),
  },
  data() {
    return {
      disabledActions: new Set(),
      style: {
        font: undefined,
        fontSize: undefined,
        color: undefined,
        fontWeight: undefined,
        verticalAlign: undefined,
        alignItems: undefined,
        background: undefined,
        fontStyle: undefined,
        height: undefined,
        width: undefined
      }
    }
  },
  methods: {
    clearStyle() {
      for (const styleKey in this.style) {
        this.style[styleKey] = undefined;
      }
      this.style.color = 'white'
    },
    readStyle() {
      this.style.font = this.selection.getStyle('fontFamily');
      this.style.color = this.selection.getColor();
      this.style.fontSize = this.getNumber(this.selection.getStyle('fontSize'));
      this.style.fontWeight = this.selection.getStyle('fontWeight');
      this.style.verticalAlign = this.selection.getStyle('verticalAlign');
      this.style.alignItems = this.selection.getStyle('textAlign');
      this.style.background = this.selection.getBackground();
      this.style.fontStyle = this.selection.getStyle('fontStyle');
      this.style.height = this.selection.getTrStyle(('offsetHeight'));
      this.style.width = this.selection.getWidth() || '0px';
      this.disabledActions = this.selection.getDisabledActions();
    },
    getNumber(str) {
      try {
        return parseInt(str.match(/\d+/g)[0])
      } catch (e) {}
      return 0
    },
  },
  watch: {
    selection: {
      handler() {
        if (!this.selection) {
          this.clearStyle();
          return
        }
        this.readStyle()
      },
      immediate: true,
    }
  }
}
</script>
<style>
.design-table-bar-container {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4f4f4f;
}

.grid-icon-grid {
  background: #939393;
}
.grid-icon {
  color: white;
  cursor: pointer;
  user-select: none;
  padding: 0 5px;
  border-radius: 4px;
}
</style>
